<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.action {
	margin: 5px;
	padding: 10px;
	background-color: #8ABD93;
}

.contact,.actions,.participants {
	margin: 5px;
	padding: 10px;
	background-color: #718E76;
}
</style>

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/pure.js"></script>
<script type="text/javascript" src="../js/dasding.js"></script>

<script type="text/javascript">
	var directive = {
		'div.action' : {
			'action<-action' : {
				'h1.actionName' : 'action.name',
				'a.contactName' : 'action.contact.name',
				'span.contactPhone' : 'action.contact.phone',
				'span.contactMail' : 'action.contact.mail',
				'a.editAction@href+' : 'action.id',
				'a.deleteAction@href+' : 'action.id',
				'a.cancelAction@href+' : 'action.id',
				'span.actionTime' : 'action.time',
				'span.actionStatus' : 'action.status',
				'span.actionCategory' : 'action.category.name',
				'a.editEvent@href+' : 'action.event.id',
				'a.participate@href+' : function() {
					console.log(this);
					return this.id + "/participate";
				},
				'div.participant' : {
					'participant<-action.participants.participant' : {
						'a.participantName' : 'participant.name',
						'a.participantName@href+' : 'participant.id'

					}
				}
			}
		}
	};
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$.ajax({
			url : "/dasding/api/actions/find",
			success : function(data) {
				console.log(data);
				$('#data').render(data, directive);
			}
		});
	});
</script>

</head>
<body>

	<!-- HTML template -->
	<div id="data">
		<div class="action">
			<h1 class="actionName"></h1>
			<div class="contact">
				<a class="contactName" href="addUser.html?actionid="></a> <span
					class="contactPhone"></span> <span class="contactMail"></span>
			</div>
			<div class="participants">
				<div class="participant">
					<a class="participantName" href="addUser.html?userid="></a>
				</div>
				<a class="participate" href="/dasding/api/actions/id/" onclick="updatedObject(event, this, 'showActions.html')">Participate</a>
			</div>
			Time: <span class="actionTime"></span><br> Category: <span
				class="actionCategory"></span><br> Status: <span
				class="actionStatus"></span><br> <a class="editAction"
				href="addAction.html?actionid=">Edit</a> <a class="deleteAction"
				href="/dasding/api/actions/id/" onclick="deleteObject(event, this, 'showActions.html')">Delete</a> <a class="cancelAction" href="actionid=">Cancel</a>
			<a class="editEvent" href="addEvent.html?eventid=">Go to Event</a>
		</div>
	</div>
</body>
</html>
